<template>
  <view class="login-container">
    <!-- 中间内容区域 -->
    <view class="content">
		<!-- Logo区域 -->
		<view class="logo-container">
		    <image class="logo" src="/static/images/logo.png" mode="aspectFill"></image>
		</view>
    </view>

    <!-- 底部按钮区域 -->
    <view class="button-container">
		<button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
		一键登录
		</button>
		<button class="cancel-btn" @tap="onCancelLogin">
		暂不登录
		</button>
    </view>
	
		<!-- 权限提示区域 -->
	<view class="permission-container">
		<text class="permission-title">申请获取以下权限</text>
		<text class="permission-detail">获得你的公开信息（昵称、头像等）</text>
	</view>
  </view>
</template>

<script>
import { login } from "@api/user";

export default {
    name: "loginPage",
    data() {
        return {
        userInfo: null,
        code: ''
        }
    },
    methods: {
        // 获取用户手机号并登录
        async getPhoneNumber(e) {
            // 检查是否获得授权
            console.log("e.detail",e.detail)
            if (e && e.detail && e.detail.errMsg === 'getPhoneNumber:ok') {
                // 显示登录中加载动画
                uni.showLoading({
                    title: '登录中...'
                });
                // 1. 获取微信登录code
                const loginRes = await wx.login({provider: 'weixin'});
                console.log('微信登录code:', loginRes);
                if (!loginRes || !loginRes.code || !loginRes.errMsg=="login:ok") {
                    uni.showToast({
                        title: '登录失败',
                        icon: 'none'
                    });
                }
                // 构造登录参数
                const loginParams = {
                    code: loginRes.code,
                    jsCode: e.detail.code
                };
                
                // 3. 调用登录接口
                const result = await login(loginParams);
                
                console.log("登录结果:",result)
                // 4. 处理登录结果
                if (result && result.code === 200) {
                    // 获取后端返回的用户信息
                    this.userInfo = result.data || {};
                    
                    // 5. 保存用户信息到本地
                    if (this.userInfo) {
                        // 保存用户信息到本地
                        uni.setStorageSync('userInfo', this.userInfo);
                        // 如果有token，也保存起来
                        if (result.data.token) {
                            uni.setStorageSync('token', result.data.token);
                        }
                    }
                    
                    uni.hideLoading();
                    uni.showToast({
                        title: '登录成功',
                        icon: 'success'
                    });
                    
                    // 6. 登录成功后跳转到首页
                    setTimeout(() => {
                        uni.redirectTo({
                            url: '/pages/index/index'
                        });
                    }, 1000);
                } else {
                    throw new Error(result && result.data && result.data.msg ? result.data.msg : '登录失败');
                }
            } else {
                // 用户拒绝授权
                uni.showToast({
                    title: '需要授权手机号才能登录',
                    icon: 'none'
                });
            }
        },
        
        // 暂不登录
        onCancelLogin() {
            // 使用导入的indexPage变量进行跳转
            uni.switchTab({
                url: indexPage
            });
        }
    }
}
</script>

<style scoped>
  .login-container {
    height: 70vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #ffffff;
  }

  /* 中间内容区域 */
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
    box-sizing: border-box;
  }

  /* Logo区域 */
  .logo-container {
    margin-bottom: 80rpx;
  }
  
  .logo {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    border: 2rpx solid #eeeeee;
  }

  /* 权限提示区域 */
  .permission-container {
    width: 100%;
    padding: 0 40rpx;
    box-sizing: border-box;
	margin-top: 50px;
  }
  
  .permission-title {
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .permission-detail {
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
    display: block;
  }

  /* 底部按钮区域 */
  .button-container {
    padding: 40rpx;
    box-sizing: border-box;
  }
  
  .login-btn {
    width: 100%;
    height: 100rpx;
    background-color: #3d9a0b;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 50rpx;
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .cancel-btn {
    width: 100%;
    height: 100rpx;
    background-color: #f5f5f5;
    color: #666666;
    font-size: 32rpx;
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>